<!--
 * @Author: 曹捷
 * @Date: 2019-08-23 16:16:02
 * @LastEditors: 曹捷
 * @LastEditTime: 2020-10-20 10:12:41
 * @Description: 自定义tabbar切换
 -->
<template>
  <div class="home flex-container full-home">
    <scroll-view class="uni-swiper-tab back obit-swiper-tab obit-four-tab" id="tab-bar">
      <view :class="tabIndex==index ? 'active' : ''" :data-current="index" :id="tab[tabId]" :key="tab[tabId]"
        @click="tapTab" class="swiper-tab-list" v-for="(tab,index) in tabBars">
        {{tab[tabName]}}
        <span class="activelab"></span>
      </view>
    </scroll-view>
    <swiper :current="tabIndex" :duration="300" @change="changeTab" class="swiper-fixed swiper-box" id="scroll"
      ref="scroll">
      <swiper-item key="1" v-if="tabBars.length>=1 ">
        <slot name="tabbar1" v-if="initInfo[0]"></slot>
      </swiper-item>
      <swiper-item key="2" v-if="tabBars.length>=2 ">
        <slot name="tabbar2" v-if="initInfo[1]"></slot>
      </swiper-item>
      <swiper-item key="3" v-if="tabBars.length>=3  ">
        <slot name="tabbar3" v-if="initInfo[2]"></slot>
      </swiper-item>
      <swiper-item key="4" v-if="tabBars.length>=4  ">
        <slot name="tabbar4" v-if="initInfo[3]"></slot>
      </swiper-item>
      <swiper-item key="5" v-if="tabBars.length>=5  ">
        <slot name="tabbar5" v-if="initInfo[4]"></slot>
      </swiper-item>
      <swiper-item key="6" v-if="tabBars.length>=6  ">
        <slot name="tabbar6" v-if="initInfo[5]"></slot>
      </swiper-item>
    </swiper>
  </div>
</template>

<script>
export default {
  components: {},
  props: {
    hasSearch: {
      type: Boolean,
      default: true,
    },
    tabBars: {
      type: Array,
    },
    tabName: {
      type: String,
      default: 'columnName',
    },
    tabId: {
      type: String,
      default: 'columnId',
    },
  },
  data () {
    return {
      initInfo: {},
      tabIndex: 0,
    }
  },
  methods: {
    changeTab (e) {
      this.tabIndex = e.detail.current
      this.$set(this.initInfo, this.tabIndex, true)
      console.log('TCL: changeTab -> this.tabIndex', this.tabIndex)
    },
    tapTab (e) {
      //点击tab-bar
      let tabIndex = e.target.dataset.current
      this.tabIndex = tabIndex
    },
  },
  mounted () {
    this.$nextTick(() => {
      this.$set(this.initInfo, 0, true)
    })
  },
  onShow () { },
}
</script>

<style lang="scss">
.obit-four-tab {
  border-bottom: 1rpx solid #e1e1e1;
  .swiper-tab-list {
    width: 25%;
  }
}
</style>